<template>
  <div class="container">
    <h3 class="h3">客户违章信息查询</h3>
    <div class="tip">{{tipMes}}</div>
    <div class="name "><div class="space">姓名:</div><input type="text" placeholder="请输入姓名" class="nameInput" v-model.trim="username" @blur="checkName"></div>
    <div class="name"><div class="space">车牌:</div><input type="text" placeholder="请输入车牌" class="nameInput" v-model.trim="LicenseNub " @blur="checkLicenseNub"></div>
    <div class="name"><div class="space">身份证:</div><input type="text" placeholder="请输入身份证" class="nameInput" v-model.trim="id" @blur="checkID"></div>
    <div class="name"><div class="space">文书号:</div><input type="text" placeholder="请输入文书号" class="nameInput" v-model.trim="serialNub" @blur="checkSerialNub"></div>
    <div class="name"><div class="space">案件号:</div><input type="text" placeholder="请输入案件编号" class="nameInput" v-model.trim="number" @blur="chenumber"></div>
    <button type="button" class="btn" @click="login">查询</button>
  </div>
</template>
<script type="text/ecmascript-6">
  export default {
    name: "confirm",
    created() {
      this.init = {}
    },
    data() {
      return {
       username: "",
        id: "",
        tipMes: "",
        LicenseNub: "",
        serialNub: "",
         number: "",
        resultData: []
      }
    },
    methods: {
      //用户名
      checkName() {
        if (!this.username) {
          this.init.flag = false;
          this.tipMes = "名字不能为空哦！！"
        }
        this.init.flag = true
      },
      //checkID
      checkID() {
        const reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
        if (!this.id) {
          this.init.flag = false;
          this.tipMes = "身份证号码不能为空哦！！";
          if (!reg.test(this.id)) {
            // this.tipMes = "身份证号码格式不正确哦！！"
          }
        }
        this.init.flag = true
      },
      //车牌号
      checkLicenseNub() {
        const reg = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1}$/;
        if (!this.LicenseNub) {
          this.init.flag = false;
          this.tipMes = "车牌号码不能为空哦！！";
          if (!reg.test(this.LicenseNub)) {
            this.tipMes = "车牌号码格式不正确！！"
          }
        }
        this.init.flag = true
      },
      //案件顺号
      checkSerialNub() {
        if (!this.serialNub) {
          this.init.flag = false;
          this.tipMes = "案件编号不能为空哦！！"
        }
        this.init.flag = true
      },
      //
      chenumber() {
        if (!this.number) {
          this.init.flag = false;
          this.tipMes = "案件序号不能为空哦！！"
        }
      },
      login() {
        if (this.username && this.id && this.LicenseNub && this.serialNub && this.number) {
          this.next()
        } else {
          this.tipMes = "你的信息没有填齐全哦！！"
        }
      },
      next() {
        this.$router.push({
          name: "list",
          params: {
            username: this.username,
            id: this.id,
            LicenseNub: this.LicenseNub,
            serialNub: this.serialNub,
            number: this.number,
          }
        })
      }
    }


  }
</script>
<style scoped lang="less" type="text/less">
  .container {
    font-size: .35rem;
    .h3 {
      text-align: center;
      margin-top: .8rem;
      /*margin-bottom: .4rem;*/
      color: #449d44;
      /*padding-bottom: 2rem;*/
    }
    .tip {
      text-align: center;
      margin-top: .3rem;
      height: .35rem;
      line-height: .35rem;
      color: red;
    }
    .name {
      font-size: .25rem;
      padding-left: .3rem;
      margin-top: .2rem;
      .space{
        display: inline-block;
        width: 1rem;
      }

    }

    .nameInput {
      width: 4rem;
      height: .3rem;
      border-radius: .22rem;
      margin: .3rem  .3rem 0 .3rem;
      padding: .25rem;
      color: black;
      border: 1px solid #ccc;
    }
    .btn {
      display: block;
      width: 6rem;
      height: .85rem;
      margin: .7rem auto;
      border-radius: .2rem;
      background: #449d44;;
      border-color: #449d44;;
      outline: none;
      border: none;
      color: #fff;
      font-size: .35rem;

    }
  }


</style>
